webkit内核浏览器自定义滚动条样式

    CSS
::-webkit-scrollbar              { /* 1 */ }
::-webkit-scrollbar-button       { /* 2 */ }
::-webkit-scrollbar-track        { /* 3 */ }
::-webkit-scrollbar-track-piece  { /* 4 */ }
::-webkit-scrollbar-thumb        { /* 5 */ }
::-webkit-scrollbar-corner       { /* 6 */ }
::-webkit-resizer                { /* 7 */ }

以上CSS代码所管辖的区域对就关系：以上注释中的数字与下图中数字相对应。

上图正如如下所言：

::-webkit-scrollbar 滚动条整体部分，其中的属性有width,height,background,border（就和一个块级元素一样）等。
::-webkit-scrollbar-button 滚动条两端的按钮。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。
::-webkit-scrollbar-track 外层轨道。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。
::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去）。
::-webkit-scrollbar-thumb 滚动条里面可以拖动的那部分
::-webkit-scrollbar-corner 边角
::-webkit-resizer 定义右下角拖动块的样式

注意：对以上各个部分定义width,height时。有如下功能：若是水平滚动条，则width属性不起作用，height属性用来控制滚动条相应部分竖直方向高度；若是竖直滚动条，则height属性不起作用，width属性用来控制相应部分的宽度。对::-webkit-scrollbar-button 相反。

demo:

<!DOCTYPE html>
<html>
<head>
    <title></title>

    <style type="text/css">        
        #test::-webkit-scrollbar {
            width: 13px;
            height: 13px;
            background-color: gray;
        }
        #test::-webkit-scrollbar-button {
            width: 13px;
            height: 13px;
            background-color: gray;
        }
        #test::-webkit-scrollbar-track {           
            background-color: gray;
        }
        #test::-webkit-scrollbar-track-piece {           
            background-color: #dedede;
            border-radius: 5px;
        }
        #test::-webkit-scrollbar-thumb {          
            background-color: #23211b;
            border-radius: 5px;
        }
        #test::-webkit-scrollbar-corner {          
            background-color: green;
        }
        #test::-webkit-resizer {       
            background-color: green;
        }
        div.scroll{
            margin: 20px auto;
            height: 100px;
            width: 100px;
            overflow: auto;
            background-color: red;
        }
        div.scroll div{
            width: 150px;
        }
    </style>
</head>
<body>

    <div id="test" class="scroll">
        <div>发的广东省大地飞歌收到合肥读后感发的广东省大地飞歌收到合肥读后感发的广东省大地飞歌收到合肥读后感发的广东省大地飞歌收到合肥读后感发的广东省大地飞歌收到合肥读后感发的广东省大地飞歌收到合肥读后感发的广东省大地飞歌收到合肥读后感
        </div>
    </div>

    <div class="scroll">
        <div>发的广东省大地飞歌收到合肥读后感发的广东省大地飞歌收到合肥读后感发的广东省大地飞歌收到合肥读后感发的广东省大地飞歌收到合肥读后感发的广东省大地飞歌收到合肥读后感发的广东省大地飞歌收到合肥读后感发的广东省大地飞歌收到合肥读后感
        </div>
    </div>
</body>
</html>

来源： https://www.lyblog.net/detail...

webkit内核浏览器自定义滚动条样式

阿斌

引用和评论

ie下带滚动条容器background属性和border属性的bug

网页设计的垂直居中

CSS团队协作规范

前端开发工具

CSS 现在终于支持高度 auto 过渡动画了

纯CSS电梯导航！借助滚动驱动动画来实现内容和导航联动

Jerry和您聊聊Chrome开发者工具